<template>
  <div>
    <div style="display: flex;;">
      <el-input v-model.trim="queryParams.name" size="mini" style="width: 220px;;" placeholder="组名"
                @keydown.native.enter.prevent="()=>getInfoList()"
      ></el-input>
      <!--        <el-input v-model="queryParams.name" size="mini" style="width: 220px;;" placeholder="api名称"></el-input>-->
      <el-button @click="() => getInfoList()" size="mini">查看api</el-button>
    </div>

    <erpDividerCard :title="groupitem?.name" v-for="groupitem in grouplist">
      <el-table :data="groupitem.detailsList" size="mini">
        <el-table-column label="name">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>

        </el-table-column>
        <el-table-column label="method">
          <template slot-scope="scope">
            <div v-html="scope.row.method"></div>
          </template>

        </el-table-column>
        <el-table-column label="url">
          <template slot-scope="scope">
            <div v-html="scope.row.url"></div>
          </template>
        </el-table-column>
        <el-table-column label="parameters">
          <template slot-scope="scope">
            <el-scrollbar style="height: 100px;position: relative;">
              <div style="position: absolute;top: 2px">
                <el-button type="text" @click="()=>triggerSeeHtml(scope.row.parameters)">查看</el-button>
              </div>
              <div v-html="scope.row.parameters"></div>
            </el-scrollbar>
          </template>
        </el-table-column>
        <el-table-column label="request">
          <template slot-scope="scope">
            <el-scrollbar style="height: 100px;position: relative;">
              <div style="position: absolute;top: 2px">
                <el-button type="text" @click="()=>triggerSeeHtml(scope.row.request)">查看</el-button>
              </div>
              <div v-html="scope.row.request"></div>
            </el-scrollbar>
          </template>

        </el-table-column>
        <el-table-column label="response">
          <template slot-scope="scope">
            <el-scrollbar style="height: 100px;position: relative;">
              <div style="position: absolute;top: 2px">
                <el-button type="text" @click="()=>triggerSeeHtml(scope.row.response)">查看</el-button>
              </div>
              <div v-html="scope.row.response"></div>
            </el-scrollbar>
          </template>

        </el-table-column>


      </el-table>
    </erpDividerCard>


    <el-pagination style="margin: 5px 0px;" :page-size="queryParams.pageSize"
                   :current-page.sync="queryParams.pageNum" layout="prev, pager, next" :total="total"
                   @size-change="(pageSize) => { $data.queryParams.pageSize = pageSize; dataList = []; getInfoList(); }"
                   @current-change="(pageNum) => { $data.queryParams.pageNum = pageNum; dataList = []; getInfoList(); }">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios';
import * as lodash from 'lodash-es';
import { openLayer } from '@/utils/layerdialog/layerdialog';

export default {
  data() {
    return {
      total: 0,
      dataList: [],
      grouplist: [],
      queryParams: {
        projectCode: '',
        name: '',
        pageSize: 10,
      },
      apidosurl: '',
    };
  },
  components: {
    erpDividerCard: () => import('@/views/components/erpDividerCard/erpDividerCard.vue'),
  },
  methods: {
    initByDialog(_data) {
      this.queryParams.projectCode = _data?.projectCode;
    },
    async getInfoList() {
      var dataList_rs = await axios.post('/apis/swagger1/getapigroup', { ...this.queryParams }).then(res => res.data);
      /*      var grouplist = lodash.groupBy(dataList_rs?.data || [], item => item.tagid);
            grouplist=lodash.map(grouplist, (detailsList,tagid)=>{
      var tagObj=detailsList?.[0].tagObj
      return {
        detailsList,
        tagObj
      }
            })*/
      this.grouplist = dataList_rs?.data || [];
      this.total = dataList_rs?.total;
    },
    async triggerSeeHtml(html) {
      await openLayer({
        data() {
          return { text: html };
        },
        components: {
          modify: () => import('@/views/manage/swagger1/seeHtmlForm.vue'),
        },
      });
    },
  },
};</script>
